<template>
  <a-modal
    v-model:visible="state.showRemarkModal"
    title="备注修改历史"
    :footer="null"
    @cancel="closeModal"
    :destroy-on-close="true"
    width="30vw"
  >
    <a-spin :spinning="state.loadingRemarkHistory">
      <a-list class="remark-list-container" :data-source="state.remarkHistory">
        <template #renderItem="item">
          <a-list-item>
            {{ item.item }}
          </a-list-item>
        </template>
      </a-list>
    </a-spin>
  </a-modal>
</template>
<script setup>
import { todo_remark_history_post } from 'server/modules/7537'
import { reactive, toRef, watch } from 'vue'
const props = defineProps(['showRemarkModal', 'tableId'])

const emit = defineEmits(['closeModal'])

const state = reactive({
  showRemarkModal: false,
  loadingRemarkHistory: false,
  remarkHistory: []
})

state.showRemarkModal = toRef(props, 'showRemarkModal')

watch(
  () => props.showRemarkModal,
  val => {
    if (val) {
      state.loadingRemarkHistory = true
      state.remarkHistory = []
      todo_remark_history_post({
        bizId: props.tableId,
        bizType: 10
      }).then(res => {
        state.remarkHistory = res.data
          .sort((a, b) => b.gmtCreate.localeCompare(a.gmtCreate))
          .map(item => {
            return `${item.gmtCreate}; ${item.username}; 备注内容：${item.remark}`
          })
        if (state.remarkHistory.length === 0) {
          state.remarkHistory.push('暂无备注')
        }
        state.loadingRemarkHistory = false
      })
    }
  }
)
function closeModal() {
  emit('closeModal')
}
</script>
<style lang="scss" scoped>
:deep(.ant-spin-container .remark-list-container) {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
}
</style>
